<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lesson 4</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // mvvm , vue 实例，vue 组件
    const app = Vue.createApp({
      data() {
        return {
          inputValue: "",
          list: [],
        };
      },
      methods: {
        handleAddItem() {
          this.list.push(this.inputValue);
          this.inputValue = "";
        },
      },
      template: `
      <div>
        <input v-model="inputValue" />
        <button
          v-on:click="handleAddItem"
          v-bind:title="inputValue"
        >
          增加
        </button>
        <ul>
          <todo-item
            v-for="(item, index) of list"
            v-bind:content="item"
            v-bind:index="index"
          /> 
        </ul>
      </div>
    `,
    }); //在模板里添加组件，并且绑定数据

    app.component("todo-item", {
      props: ["content", "index"],
      template: "<li>{{index}} -- {{content}}</li>",
    }); //注册一个组件

    app.mount("#root"); //增加组件在前，最后再进行挂载
  </script>
</html>
